<template>
	<uni-popup ref="popup" type="bottom" :safe-area="false">
		<view class="popup-all">
			<view class="popup-title d-flex d-r a-center j-between">
				<view class="popup-title-left"></view>
				<text class="popup-title-text">请输入支付密码</text>
				<view @tap="close" class="popup-right-right d-flex d-r a-center j-center">
					<image style="width: 36rpx;height: 36rpx;" src="/static/image/close.png"></image>
				</view>
			</view>
			<view class="popup-pwd d-flex d-r j-between">
				<text class="popup-pwd-frame" :class="{focus:isFocus(0)}">{{getShowDigit(0)}}</text>
				<text class="popup-pwd-frame" :class="{focus:isFocus(1)}">{{getShowDigit(1)}}</text>
				<text class="popup-pwd-frame" :class="{focus:isFocus(2)}">{{getShowDigit(2)}}</text>
				<text class="popup-pwd-frame" :class="{focus:isFocus(3)}">{{getShowDigit(3)}}</text>
				<text class="popup-pwd-frame" :class="{focus:isFocus(4)}">{{getShowDigit(4)}}</text>
				<text class="popup-pwd-frame" :class="{focus:isFocus(5)}">{{getShowDigit(5)}}</text>
			</view>
			<view style="height: 50rpx;"></view>
			<view class="popup-keyboard">
				<view class="edit-keyboard d-flex d-r j-between wrap">
					<text @touchstart.stop="count('1')" class="edit-keyboard-button">1</text>
					<text @touchstart.stop="count('2')" class="edit-keyboard-button">2</text>
					<text @touchstart.stop="count('3')" class="edit-keyboard-button">3</text>
					<text @touchstart.stop="count('4')" class="edit-keyboard-button">4</text>
					<text @touchstart.stop="count('5')" class="edit-keyboard-button">5</text>
					<text @touchstart.stop="count('6')" class="edit-keyboard-button">6</text>
					<text @touchstart.stop="count('7')" class="edit-keyboard-button">7</text>
					<text @touchstart.stop="count('8')" class="edit-keyboard-button">8</text>
					<text @touchstart.stop="count('9')" class="edit-keyboard-button">9</text>
					<view style="width: 210rpx;"></view>
					<text @touchstart.stop="count('0')" class="edit-keyboard-button">0</text>
					<view @touchstart.stop="count('del')" class="edit-keyboard-button d-flex a-center j-center">
						<image class="keyboard-button-image" src="@/static/image/keyboard-del.png"></image>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="tsx">
import { ref,nextTick } from 'vue';
import CryptoJS from 'crypto-js'

const popup = ref()
const open = () =>{
	pwd.value="";
	popup.value.open()
}
const close = () => {
	popup.value.close();
}
const pwd = ref("")
const isFocus = (idx:number) => {
	if(pwd.value.length==idx){
		return true
	}else{
		return false
	}
}
const getShowDigit = (idx:number) => {
	if(pwd.value.length>idx){
		return "·";
	}
	return "";
}
const emit = defineEmits(["confirmPay"])
const count = (str:string) => {
	if(str=='del'){
		nextTick(()=>{
			if(pwd.value.length>0&&pwd.value.length<=6)pwd.value = pwd.value.slice(0, -1);
		});
	}else{
		nextTick(()=>{
			if(pwd.value.length<6&&pwd.value.length>=0)pwd.value += str;
			if(pwd.value.length==6){
				const keyStr = '6538e688e4e97b56';
				const pwdKey = CryptoJS.AES.encrypt(pwd.value, CryptoJS.enc.Utf8.parse(keyStr), {
				        mode: CryptoJS.mode.ECB,
				        padding: CryptoJS.pad.Pkcs7
				    }).toString()
				emit("confirmPay", pwdKey);
			}
		});
	}
	
}

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-all{
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding-bottom: 60rpx;
	.popup-title{
		height: 100rpx;
		.popup-title-left{
			width: 100rpx;
			height: 100rpx;
		}
		.popup-title-text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.popup-right-right{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.popup-pwd{
		padding: 100rpx 53rpx 0 53rpx;
		.popup-pwd-frame{
			width: 84rpx;
			height: 84rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 100rpx;
			color: #333333;
			line-height: 84rpx;
			text-align: center;
			&.focus{
				background: #ffffff;
				box-shadow: 0rpx 7rpx 14rpx 4rpx rgba(196,249,237,0.2);
				border-radius: 10rpx;
				border: 2rpx solid #23E2A6;
			}
		}
	}
	.popup-keyboard{
		background: #FFFFFF;
		.edit-keyboard{
			padding:60rpx 50rpx 0 50rpx;
			width: 750rpx;
			.edit-keyboard-button{
				width: 210rpx;
				height: 100rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 100rpx;
				text-align: center;
				.keyboard-button-image{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.edit-keyboard-button:active {  
			  background-color: rgba(0, 0, 0, 0.1);
			  border-radius: 10rpx;
			}
		}
		.confirm-button{
			padding: 40rpx 0;
		}
	}
}


/*     公共属性     */
.psr {
    position: relative;
}

.psa {
    position: absolute;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}


.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row !important;
}

.j-end {
    justify-content: flex-end;
}


.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

.uline{
    text-decoration: underline;
}

.c_main{
    color:$slim-main;
}

.b_main{
    background-color:$slim-main;
}

</style>